<template>
  <el-drawer class="tl-drawer tl-drawer-approval" ref="drawerRef" :visible.sync="visible" :with-header="false" size="95%" :modal-append-to-body="true" :close-on-press-escape="false" :append-to-body="true" @open="open" @close="close" :destroy-on-close="true">
    <div class="approval-container">
      <el-scrollbar class="approval-main-container">
        <div class="form-main-area">
          <component v-if="!disabled" :is="subPage" ref="subPage" render="div" @mounted="pageCreated" :visible.sync="visible" @close="visible = false"></component>
        </div>
      </el-scrollbar>
      <div class="approval-area">
        <el-form class="tl-form approval-area" ref="form" label-width="120px">
          <el-row>
            <el-col :span="backNodeList.length > 0 ? 12 : 18">
              <el-form-item label="办理意见">
                <el-input type="textarea" :rows="2" placeholder="" v-model="approvalopinion"> </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" v-if="backNodeList.length > 0">
              <el-form-item label="退回节点">
                <el-select v-model="backNodeId" placeholder="请选择">
                  <el-option v-for="item in backNodeList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="5" :offset="1" style="padding-top:10px;">
              <el-button :disabled="disabled" :loading="loading" type="success" @click="doApproval(1)">{{ isApproval ? buttonNameAgree : buttonNameFinish }}</el-button>
              <el-button :disabled="disabled" :loading="loading" type="danger" @click="doApproval(2)" v-if="isApproval">{{ buttonNameNoAgree }}</el-button>
              <el-button :loading="loading" type="primary" @click="doSkipApproval" v-if="displaySkip">无需办理</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { getAction, putAction, postAction } from '@tapui/utils/http'
export default {
  name: 'ApprovalPage',
  data() {
    return {
      visible: false,
      title: '单据审批',
      subPage: 'div',
      nodeInsId: 0,
      nodeModel: {},
      isApproval: true,
      uiOperateState: 4,
      disabled: false,
      url: {
        queryNodeInfo: 'cbo/approvalNodeIns/queryNodeInfo',
        queryBackNode: 'cbo/approvalNode/queryBackNode',
        approvalAction: ''
      },
      backNodeList: [],
      backNodeId: 0,
      approvalopinion: '',
      loading: false,

      beforePassMethod: '',
      beforeBackMethod: '',
      buttonNameAgree: '同意',
      buttonNameNoAgree: '不同意',
      buttonNameFinish: '办理完成',
      // 无需办理，跳过功能
      displaySkip: false,
      skipOpinion: '【无需办理】',
      // 额外添加的，传递额外参数
      extraParam: '',
      isProcessApproval: ''
    }
  },
  methods: {
    loadData() {
      getAction(this.url.queryNodeInfo, { nodeinsid: this.nodeInsId }).then((res) => {
        if (res.success) {
          this.nodeModel = res.result
          this.bindData()
          this.bindBackNode()
        } else {
          this.disabled = true
          this.$tap.alert(res.message)
        }
      })
    },
    bindData() {
      if (this.nodeModel.approvalparam) {
        let jsonParam = JSON.parse(this.nodeModel.approvalparam)
        if (jsonParam.hasOwnProperty('uiOperateState')) {
          this.uiOperateState = jsonParam.uiOperateState
        } else {
          this.uiOperateState = 4
        }
        if (jsonParam.hasOwnProperty('isapproval')) {
          this.isApproval = jsonParam.isapproval.toString() === '1'
        } else {
          this.isApproval = true
        }
        // 审批通过前，执行编辑页面中的某个方法，等待方法返回成功后才执行审批
        if (jsonParam.hasOwnProperty('beforePassMethod')) {
          this.beforePassMethod = jsonParam.beforePassMethod
        } else {
          this.beforePassMethod = ''
        }
        // 审批驳回前，执行编辑页面中的某个方法，等待方法返回成功后才执行审批
        if (jsonParam.hasOwnProperty('beforeBackMethod')) {
          this.beforeBackMethod = jsonParam.beforeBackMethod
        } else {
          this.beforeBackMethod = ''
        }
        // 同意按钮的显示名字
        if (jsonParam.hasOwnProperty('buttonNameAgree')) {
          this.buttonNameAgree = jsonParam.buttonNameAgree.toString()
        } else {
          this.buttonNameAgree = '同意'
        }
        // 不同意按钮的显示名字
        if (jsonParam.hasOwnProperty('buttonNameNoAgree')) {
          this.buttonNameNoAgree = jsonParam.buttonNameNoAgree.toString()
        } else {
          this.buttonNameNoAgree = '不同意'
        }
        // 办理按钮的显示名字
        if (jsonParam.hasOwnProperty('buttonNameFinish')) {
          this.buttonNameFinish = jsonParam.buttonNameFinish.toString()
        } else {
          this.buttonNameFinish = '办理完成'
        }
        // 额外添加的参数
        if (jsonParam.hasOwnProperty('extraParam')) {
          this.extraParam = jsonParam.extraParam.toString()
        } else {
          this.extraParam = ''
        }
         // 流程办部门长审批节点
        if (jsonParam.hasOwnProperty('isProcessApproval')) {
          this.isProcessApproval = jsonParam.isProcessApproval.toString()
        } else {
          this.isProcessApproval = '0'
        }
      } else {
        this.uiOperateState = 4
        this.isApproval = true
        this.beforePassMethod = ''
        this.beforeBackMethod = ''
        this.buttonNameAgree = '同意'
        this.buttonNameNoAgree = '不同意'
        this.buttonNameFinish = '办理完成'
        this.extraParam = ''
        this.isProcessApproval = '0'
      }
      // const page = () => import(this.nodeModel.approvalform)
      // const page = this.loadView(this.nodeModel.approvalform)
      const page = () => import('@/views/' + this.nodeModel.approvalform)
      this.subPage = page
      this.url.approvalAction = this.nodeModel.approvalaction
    },
    bindBackNode() {
      this.backNodeList = []
      getAction(this.url.queryBackNode, { nodeinsid: this.nodeInsId }).then((res) => {
        if (res.success) {
          this.backNodeList = res.result
        } else {
          this.disabled = true
          this.$tap.alert(res.message)
        }
      })
    },
    pageCreated() {
      this.$refs.subPage.id = this.nodeModel.sourceid
      // this.$refs.subPage.id = 20011600000001
      this.$refs.subPage.isAdd = false
      this.$refs.subPage.visible = true
      this.$refs.subPage.disableEditSubmit = false
      this.$refs.subPage.uiOperateState = this.uiOperateState
      this.$refs.subPage.approvalNodeModel = this.nodeModel
      this.$refs.subPage.isApproval = this.isApproval
      this.$refs.subPage.extraParam = this.extraParam
      this.$refs.subPage.fromApproval = '1'
      this.$refs.subPage.isProcessApproval = this.isProcessApproval
      this.$refs.subPage.open()
    },
    doApproval(approvalType) {
      if (approvalType === 2 && this.backNodeList.length > 0) {
        if (this.backNodeId === 0) {
          this.$tap.alert('请选择退回节点')
          return
        }
      }
      if (approvalType === 2 && this.approvalopinion.length === 0) {
        this.$tap.alert('请填写审批意见')
        return
      }
      this.loading = true
      if (this.beforePassMethod.length > 0 && approvalType === 1) {
        let method = new Promise(this.$refs.subPage[this.beforePassMethod])
        method
          .then((_) => {
            this.approval(approvalType)
          })
          .catch((err) => {
            this.loading = false
          })
      } else if (this.beforeBackMethod.length > 0 && approvalType === 2) {
        let method = new Promise(this.$refs.subPage[this.beforeBackMethod])
        method
          .then((_) => {
            this.approval(approvalType)
          })
          .catch((err) => {
            this.loading = false
          })
      } else {
        this.approval(approvalType)
      }
    },
    doSkipApproval() {
      this.approvalopinion = this.skipOpinion
      this.approval(1)
    },
    approval(approvalType) {
      let postData = {
        nodeinsid: this.nodeInsId,
        sourceid: this.nodeModel.sourceid,
        approvalopinion: this.approvalopinion,
        approvaltype: approvalType,
        backnodeid: this.backNodeId,
        nextuserid: 0
      }
      putAction(this.url.approvalAction, postData)
        .then((res) => {
          if (res.success) {
            this.$tap.message('操作成功', 'success')
            this.$emit('refresh')
            this.visible = false
          } else {
            this.$tap.alert(res.message)
          }
          this.loading = false
        })
        .catch((_) => {
          this.loading = false
        })
    },
    open() {
      this.approvalopinion = ''
      this.loadData()
    },
    close() {
      this.$emit('cancel')
    },
    // iframe用，防止open被二次调用
    iframeOpen() {}
  }
}
</script>

<style scoped></style>
